<template>
    <span>
        <template v-if="action == 'edit' ">
            <lar-field-select
                    :value="value"
                    v-on="$listeners"
                    :data="data"
                    :fieldLink="fieldLink"
                    :fieldOption="fieldOption"
                    fieldMulti="true"
                    :fieldKey="fieldKey"
                    :action="action">
            </lar-field-select>
            <fleet-map-area :show-button="false" :polygon-obj="polygonObj" :edit="false"></fleet-map-area>
        </template>
        <template v-if="action == 'search' ">
            <lar-field-select
                    :value="value"
                    v-on="$listeners"
                    :data="data"
                    :fieldLink="fieldLink"
                    :fieldOption="fieldOption"
                    fieldMulti="true"
                    :fieldKey="fieldKey"
                    :action="action">
            </lar-field-select>
        </template>
        <template v-if="action == 'table'">
            {{value}}
        </template>
    </span>
</template>
<script>
    import FleetMapArea from '../map/map-area.vue'
    import base from './base.js';

    export default {
        extends: base,
        components: {
            FleetMapArea
        },
        props: {
            fieldLink: {//连表的相关结构
                type: Object,
                require: true,
            },
            fieldOption: {//如果不远程连表的话,这个代表备选数据
                type: Array,
                default: function () {
                    return [];
                },
            },
            fieldKey: String,
        },
        data() {
            return {
                searchModel: 'like',
                polygonObj: [],
                areaList: [],
                areaId: []
            }
        },
        watch: {
            myValue: function (newValue) {
                this.getMuiltFleet();
            }
        },
        methods: {
            getAreaId(data) { // 获取所有的区域id
                this.areaId = [];
                data.forEach(itemw => {
                    if (itemw.area && itemw.area.length > 0) {
                        itemw.area.forEach(iteml => {
                            this.areaId.push(iteml.id);
                        });
                    }
                });
                this.arrayDeweighting(); // 数组去重
            },
            arrayDeweighting() {
                let temp = []; //一个新的临时数组
                for(let i = 0; i < this.areaId.length; i++){
                    if(temp.indexOf(this.areaId[i]) == -1){
                        temp.push(this.areaId[i]);
                    }
                }
                this.areaId = temp;
                this.getMuiltArea();
            },
            getMuiltFleet() {
                this.$http.get('express/fleet?id$=' + JSON.stringify(this.myValue))
                    .then((response) => {
                        this.getAreaId(response.data.data);  // 获取所有的区域id
                    })
                    .catch((error) => {
                        if(error.response.data.msg){
                            this.$message.error(error.response.data.msg);
                        }else{
                            this.$message.error('请求错误：'+error.response.status);
                        }
                    });
            },
            getMuiltArea() {
                this.$http.get('express/area?id$=' + JSON.stringify(this.areaId))
                    .then((response) => {
                        this.polygonObj = response.data.data;
                    })
                    .catch((error) => {
                        if(error.response.data.msg){
                            this.$message.error(error.response.data.msg);
                        }else{
                            this.$message.error('请求错误：'+error.response.status);
                        }
                    });
            }
        },
    }
</script>
<style lang="less" scoped>
    .el-form-item__content{
        line-height: 20px !important;
    }

</style>
